<template>
  <div class="find-page">
    <!--一、 头部 -->
    <div class="nav">
      <span>
        <i class="arrow">
          <van-icon name="arrow-left" />
        </i>
      </span>
      <van-search
        v-model="value"
        show-action
        placeholder="请输入小区或地址"
        @search="onSearch"
        background="#4fc08d"
      >

        <template #left>
          <div
            class="city_box"
            @click="$router.push('/city')"
          >{{cityname?cityname:"上海"}}▼</div>
        </template>

        <template #action>
        </template>
      </van-search>

      <!-- 地图 -->
      <div
        class="map"
        @click='$router.push("/map")'
      >
        <!-- 跳转地图 -->
        <van-icon name="location-o" />
      </div>

    </div>

    <!--二、下拉菜单 +(选择器+button) -->
    <van-dropdown-menu active-color="#21b97a">
      <!-- 1.区域 -->
      <van-dropdown-item
        title="区域"
        ref="item1"
      >
        <!-- 这里的ref为了控制toggle(显示隐藏) -->
        <!-- title属性扒的下拉菜单文档 -->
        <van-picker
          show-toolbar
          title=""
          :columns="columns1"
          @confirm="onConfirm1"
          ref='box1'
        />
        <!--这里 ref为了获取节点然后模拟点击 -->
        <van-button
          plain
          type="primary"
          @click="$refs.item1.toggle()"
        >取消</van-button>
        <van-button
          type="primary"
          @click="submitFn1"
        >确定</van-button>
      </van-dropdown-item>
      <!-- 2.方式 -->
      <van-dropdown-item
        title="方式"
        ref="item2"
      >
        <van-picker
          show-toolbar
          title=""
          :columns="columns2"
          @confirm="onConfirm2"
          ref='box2'
        >
        </van-picker>
        <van-button
          plain
          type="primary"
          @click="$refs.item2.toggle()"
        >取消</van-button>
        <van-button
          type="primary"
          @click="submitFn2"
        >确定</van-button>
      </van-dropdown-item>
      <!--3. 租金 -->
      <van-dropdown-item
        title="租金"
        ref="item3"
      >
        <van-picker
          show-toolbar
          title=""
          :columns="columns3"
          @confirm="onConfirm3"
          ref='box3'
        />
        <van-button
          plain
          type="primary"
          @click="$refs.item3.toggle()"
        >取消</van-button>
        <van-button
          type="primary"
          @click="submitFn3"
        >确定</van-button>
      </van-dropdown-item>
      <!--4. 筛选 弹出层-->

      <van-dropdown-item
        title="筛选"
        @open="show = true"
      />
    </van-dropdown-menu>
    <!-- 弹出层放菜单外面 -->
    <!--弹出层----------------- -->
    <van-popup
      v-model="show"
      position="right"
      :style="{ height: '100%', width: '70%' }"
    >
      <!-- < dl>< /dl>用来创建一个普通的列表,< dt>< /dt>用来创建列表中的上层项目，< dd>< /dd>用来创建列表中最下层项目 -->
      <!-- 户型 -->
      <dl>
        <dt>户型</dt>
        <dd><span v-for="(item,index) in roomType" :key="index" @click="clickFn1(item.value,index)" :class='{active:inconLightIndex1.indexOf(index)>-1}'>{{item.label}}</span></dd>
      </dl>
      <dl>
        <dt>朝向</dt>
        <dd><span v-for="(item,index) in oriented" :key="index"  @click="clickFn2(item.value,index)" :class='{active:inconLightIndex2.indexOf(index)>-1}'>{{item.label}}</span></dd>
      </dl>
      <dl>
        <dt>楼层</dt>
        <dd><span v-for="(item,index) in floor" :key="index"  @click="clickFn3(item.value,index)" :class='{active:inconLightIndex3.indexOf(index)>-1}'>{{item.label}}</span></dd>
      </dl>
      <dl>
        <dt>房屋亮点</dt>
        <dd><span v-for="(item,index) in characteristic" :key="index"  @click="clickFn4(item.value,index)" :class='{active:inconLightIndex4.indexOf(index)>-1}'>{{item.label}}</span></dd>
      </dl>
      <div class="fixed">
        <van-button
          plain
          type="primary"
          class="btn"
        >清除</van-button>
        <van-button
          type="primary"
          class="btn"
        >确定</van-button>
      </div>

    </van-popup>
    <!-- ------------------------- -->

    <!--三、列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <!-- 封装了单独的商品列表样式在components中  -->
      <Item
        v-for="(item,index) in list"
        :key="index"
        :item='item'
      ></Item>
    </van-list>

  </div>

</template>

<script>
import { getcityName, getcityValue } from '@/utils/storage'

import request from '@/utils/request'
import Item from '@/components/Item.vue'

export default {

  name: 'find-page', // 加了name,组件名字可以随便起
  components: {
    Item
  },
  data () {
    return {
      show: false, // 弹出层的内容
      value: '', /* 搜索框 */
      list: [],
      loading: false,
      finished: false,
      text: '',
      // 下拉菜单里面 body里的数据
      /* -----------区域---------------- */
      // 区域和地铁
      columns1: [
        {
          text: '区域',
          children: [
            {
              text: '',
              children: [{ text: '' }, { text: '' }]
            }
          ]
        },
        {
          text: '地铁',
          children: [
            {
              text: '',
              children: [{ text: '' }, { text: '' }]
            }
          ]
        }
      ],
      area: [], // 区域-区域
      characteristic: [], // 筛选亮点
      floor: [], // 筛选楼层
      oriented: [], // 筛选朝向
      roomType: [], // 筛选户型
      subway: [], // 区域-地铁
      /* 高亮 */
      inconLightIndex1: [], // 存放高亮索引
      inconLightIndex2: [], // 存放高亮索引
      inconLightIndex3: [], // 存放高亮索引
      inconLightIndex4: [], // 存放高亮索引

      inconLightValue1: [], // 存放高亮每一项的value
      inconLightValue2: [], // 存放高亮每一项的value
      inconLightValue3: [], // 存放高亮每一项的value
      inconLightValue4: [], // 存放高亮每一项的value

      /* ------- */
      columns2: [], // 方式
      columns3: []// 租金
    }
  },
  // 1.请求数据渲染列表
  async created () {
    // 获取本地当前城市名
    this.cityname = getcityName()
    // 获取当前城市id,之前存在本地  查询房屋具体信息接口
    const { body } = await request.get('/houses', { params: { id: getcityValue() } })
    /* console.log(body); */
    this.list = body.list
    if (this.list.length > body.list.length) {
      this.finished = true
    }

    // 2.渲染下拉菜单 根据条件查询房屋  获取房屋查询条件接口
    const res = await request.get('/houses/condition', { params: { id: getcityValue() } })
    console.log(res)
    // 区域-地铁
    this.subway = res.body.subway.children
    const subwayData = this.subway.map(item => {
      return {
        text: item.label,
        children: [...(item.children === undefined
          ? ''
          : item.children.map(item => {
            return {
              text: item.label
            }
          }))]
      }
    }
    )
    this.columns1[1].children = subwayData
    // 区域-区域
    this.area = res.body.area.children
    const areaData = this.area.map(item => {
      return {
        text: item.label,
        children: [...(item.children === undefined// 要记得展开奥
          ? ''
          : item.children.map(item => {
            return {
              text: item.label
            }
          }))]
      }
    })
    console.log(this.columns1)
    this.columns1[0].children = areaData

    // 方式columns2   map用来处理数据，v-for用来遍历当前标签
    this.columns2 = res.body.rentType.map(item => {
      return {
        text: item.label
      }
    })
    // 租金columns3
    this.columns3 = res.body.price.map(item => {
      return {
        text: item.label
      }
    })
    /* -----------------------------------筛选----------------------- */
    // 筛选户型 roomtype
    this.roomType = res.body.roomType
    // 筛选朝向 oriented
    this.oriented = res.body.oriented
    // 筛选楼层 floor
    this.floor = res.body.floor
    // 筛选亮点 characteristic
    this.characteristic = res.body.characteristic
  },
  methods: {
    /* ----------------------------四个cv------------------------------------ */
    // 筛选的点击高亮
    clickFn1 (label, index) {
      // console.log(label, index)
      /* 高亮索引 */
      if (this.inconLightIndex1.indexOf(index) === -1) {
        this.inconLightIndex1.push(index)
      } else {
        this.inconLightIndex1.splice(this.inconLightIndex1.indexOf(index), 1)// indexOf()返回的是元素在inconLightIndex中的下标
      }
      /* 高亮每一项 */
      if (this.inconLightValue1.indexOf(label) === -1) {
        this.inconLightValue1.push(label)
      } else {
        this.inconLightValue1.splice(this.inconLightValue1.indexOf(label), 1)
      }
    },
    // 筛选的点击高亮
    clickFn2 (label, index) {
      // console.log(label, index)
      /* 高亮索引 */
      if (this.inconLightIndex2.indexOf(index) === -1) {
        this.inconLightIndex2.push(index)
      } else {
        this.inconLightIndex2.splice(this.inconLightIndex2.indexOf(index), 1)// indexOf()返回的是元素在inconLightIndex中的下标
      }
      /* 高亮每一项 */
      if (this.inconLightValue2.indexOf(label) === -1) {
        this.inconLightValue2.push(label)
      } else {
        this.inconLightValue2.splice(this.inconLightValue2.indexOf(label), 1)
      }
    },
    // 筛选的点击高亮
    clickFn3 (label, index) {
      // console.log(label, index)
      /* 高亮索引 */
      if (this.inconLightIndex3.indexOf(index) === -1) {
        this.inconLightIndex3.push(index)
      } else {
        this.inconLightIndex3.splice(this.inconLightIndex3.indexOf(index), 1)// indexOf()返回的是元素在inconLightIndex中的下标
      }
      /* 高亮每一项 */
      if (this.inconLightValue3.indexOf(label) === -1) {
        this.inconLightValue3.push(label)
      } else {
        this.inconLightValue3.splice(this.inconLightValue3.indexOf(label), 1)
      }
    },
    // 筛选的点击高亮
    clickFn4 (label, index) {
      // console.log(label, index)
      /* 高亮索引 */
      if (this.inconLightIndex4.indexOf(index) === -1) {
        this.inconLightIndex4.push(index)
      } else {
        this.inconLightIndex4.splice(this.inconLightIndex4.indexOf(index), 1)// indexOf()返回的是元素在inconLightIndex中的下标
      }
      /* 高亮每一项 */
      if (this.inconLightValue4.indexOf(label) === -1) {
        this.inconLightValue4.push(label)
      } else {
        this.inconLightValue4.splice(this.inconLightValue4.indexOf(label), 1)
      }
      console.log(this.inconLightValue4)
    },
    /* ---------------------------------------------------------------- */
    // 弹出层
    showPopup () {
      this.show = true
    },
    // 区域确认 ref获取，再模拟点击
    submitFn1 () {
      this.$refs.box1.confirm()
    },
    submitFn2 () {
      this.$refs.box2.confirm()
    },
    submitFn3 () {
      this.$refs.box3.confirm()
    },
    onConfirm1 (value, index) { // value, index是组件内置
      /* 选择器确认按钮模拟点击下拉菜单的toggle  隐藏下拉菜单 */
      console.log(index[0])
      this.$refs.item1.toggle()
    },
    onConfirm2 (value, index) {
      /* 隐藏下拉菜单 */
      this.$refs.item2.toggle()
    },
    onConfirm3 (value, index) {
      /* 隐藏下拉菜单 */
      this.$refs.item3.toggle()
    },

    onLoad () {
      this.finished = true
    },
    onSearch () {

    }
  }

}
</script>

<style lang="less" scoped>
  /* /deep/ .btn {
   position: fixed;
    bottom: 0;
    width: 50%;
    z-index: 999;
  } */
  /deep/ .van-picker__toolbar {
    display: none;
  }
  .active{
    color: #21b97a;
      }
  dt {
    margin-left: 10px;
    margin-bottom: 15px;
    font-size: 14px;
  }
  dd {
    width: 43.33333vw;
    line-height: 6.53333vw;
    text-align: center;
    font-size: 2.66667vw;
    display: flex;
    flex-wrap: wrap;//换行
    color: #333;
    border-bottom: 1px solid #e5e5e5;
    justify-content: space-between;
  span {
      margin-right: 10px;
      width: 70px;
      height: 30px;
      border: 1px solid #ccc;
      display: inline-block;
      line-height: 30px;
      margin-bottom: 10px;
    }
  }
  .van-button--primary.van-button--normal {
    width: 50%;
  }

  .van-popup--top {
    top: 98px;
    left: 0;
    width: 100%;
  }

  .classify {
    display: flex;
    justify-content: space-evenly;
    font-size: 14px;
  }

  .van-search__content {
    background-color: #fff;
    border: none;
  }

  .city_box {
    background-color: #fff;
    height: 8.89667vw;
    line-height: 8.89667vw;
    /* margin-left: 40px; */
  }

  .van-search {
    background-color: #4fc08d;
  }

  .arrow {
    font-size: 5.2vw;
    line-height: 13.89667vw;
    margin-left: 10px;
  }

  .nav {
    display: flex;
    justify-content: flex-start;
    background-color: #4fc08d !important;
  }

  .map {
    position: absolute;
    top: 10px;
    right: 10px;
    align-items: center;
    font-size: 25px;
    width: 34px;
    height: 8.89667vw;
    line-height: 8.89667vw;
    color: #fff;
  }

</style>
